<template>
  <div class="report_card">
    <van-swipe
      :initial-swipe="0"
      class="swipe"
      :show-indicators="false"
      :loop="false"
      ref="ReportSwipeRef"
    >
      <van-swipe-item>
        <div class="card-content">
          <card-title :titleText="i18n.t(titleList[0])">
            <div class="align-items-center swipe-button" @click="handleTurnNext">
              {{ i18n.t('base_1029') }}
              <img
                src="@/assets/images/eight_electrodes_report/right_white.png"
                class="swipe-button-icon swipe-button-right"
              />
            </div>
          </card-title>
          <slot name="firstPage" />
        </div>
      </van-swipe-item>
      <van-swipe-item v-if="pageNum === 3 || pageNum === 4">
        <card-title :titleText="i18n.t(titleList[pageNum - 3])">
          <div class="flex">
            <div class="align-items-center swipe-button swipe-button-more" @click="handleBackFirst">
              <img
                :src="require('@/assets/images/eight_electrodes_report/left_white.png')"
                class="swipe-button-icon"
              />
            </div>
            <div class="align-items-center swipe-button" @click="handleTurnNext">
              <p class="swipe-button-text">
                {{ i18n.t('base_1027') }}
              </p>
              <img
                src="@/assets/images/eight_electrodes_report/right_white.png"
                class="swipe-button-icon swipe-button-right"
              />
            </div>
          </div>
        </card-title>
        <slot name="morePageOne" />
      </van-swipe-item>
      <van-swipe-item v-if="pageNum === 4">
        <card-title :titleText="i18n.t(titleList[pageNum - 2])">
          <div class="flex">
            <div class="align-items-center swipe-button swipe-button-more" @click="handleBackFirst">
              <img
                :src="require('@/assets/images/eight_electrodes_report/left_white.png')"
                class="swipe-button-icon"
              />
            </div>
            <div class="align-items-center swipe-button" @click="handleTurnNext">
              <p class="swipe-button-text">{{ i18n.t('base_1027') }}</p>
              <img
                src="@/assets/images/eight_electrodes_report/right_white.png"
                class="swipe-button-icon swipe-button-right"
              />
            </div>
          </div>
        </card-title>
        <slot name="morePageTwo" />
      </van-swipe-item>
      <van-swipe-item>
        <card-title :titleText="i18n.t(titleList[pageNum - 1])">
          <div class="align-items-center swipe-button" @click="handleBackFirst">
            <img
              :src="require('@/assets/images/eight_electrodes_report/left_white.png')"
              alt=""
              class="swipe-button-icon"
            />
          </div>
        </card-title>
        <slot name="lastPage" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import CardTitle from '../CardTitle.vue'
import serve from './serve'

@Component({ components: { CardTitle } })
export default class extends Mixins(serve) {
  @Prop() titleList!: string[]
  @Prop({ default: 2 }) pageNum!: number
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import './index.scss';
</style>
